<template>
	<view class="container">
		<view class="header">
			<view class="left">
				
			</view>
			<view class="right">
				<view class="user">{{userInfo?.userName || '匿名用户'}}</view>
				<view class="desc">
					亲爱的新人，早上好
				</view>
			</view>
		</view>
		<view class="temp-box">
			<view class="head">
				<view class="left">
					我的模版
				</view>
				<view class="right">
					全部模版
				</view>
			</view>
			<view class="content">
				<view class="row" v-for="(itm, i) in orderList" :key="i+itm.name">
					<view class="icon">
						<image class="icon__img" :src="itm.icon" mode=""></image>
					</view>
					<view class="name">
						{{ itm.name }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="my-temp-box">
			<view class="title">
				我的模版
			</view>
			<view class="content">
				<view class="left">
					<image class="icon" :src="myTemplatInfo.url" mode=""></image>
				</view>
				<view class="right">
					<view class="name">
						{{ myTemplatInfo.name }}
					</view>
					<view class="btn-box">
						<view class="btn">
							浏览人数 {{ myTemplatInfo.count }}
						</view>
						<view class="btn">
							<button open-type="share">分享</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="itm">
				<view class="title">
					邀请好友
				</view>
			</view>
			<view class="itm">
				<view class="title">
					邀请好友
				</view>
			</view>
			<view class="itm">
				<view class="title">
					联系我们
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { toRefs, ref, reactive, onMounted } from "vue";
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { useUserStore } from "@/store";
	import servers from '@/apis/user'
	const { userInfo } = toRefs(useUserStore())
	
	const orderList = ref<any>([
		{
			icon: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_07.webp',
			name: '待付款'
		},
		{
			icon: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_08.webp',
			name: '待使用'
		},
		{
			icon: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_09.webp',
			name: '服务中'
		},
		{
			icon: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/icons/icon_11.webp',
			name: '全部订单'
		}
	])
	
	const myTemplatInfo = reactive({
		url: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_1.png',
		name: '蛰虫始振',
		count: 666
	})
	
	onShareAppMessage(() => {
		return {
		  title: '木瓜笺',
		  path: '/pages/mine/mine', // 必须使用绝对路径
		  imageUrl: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_1.png' // 可选，分享图片路径
		}
	})
	onShareTimeline(() => {
		return {
		  title: '木瓜笺',
		  path: '/pages/mine/mine', // 必须使用绝对路径
		  imageUrl: 'https://env-00jxh5u7zldw.normal.cloudstatic.cn/template/model_1.png' // 可选，分享图片路径
		}
	})
	
	onMounted(() => {
		servers.login({ phone: 13184232663, name: 'hhhhh'})
	})
</script>

<style lang="scss" scoped>
.container {
	background: rgba(245, 245, 245, 1);
	width: 100%;
	height: 100vh;
	
	.header {
		width: 100%;
		height: 380rpx;
		background: rgba(215, 55, 91, 1);
		display: flex;
		align-items: center;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		box-sizing: border-box;
		padding: 32rpx;
		
		.left {
			width: 130rpx;
			height: 130rpx;
			background: rgba(255, 230, 232, 1);
			border-radius: 100%;
		}
		.right {
			margin-left: 16rpx;
			color: rgba(255, 255, 255, 1);
			
			.desc {
				margin-top: 8rpx;
				font-size: 22rpx;
			}
		}
	}
	.temp-box {
		width: 680rpx;
		height: 272rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;
		margin: 0 auto;
		top: -50rpx;
		box-sizing: border-box;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		
		.head {
			display: flex;
			justify-content: space-between;
			
			.right {
				color: rgba(102, 102, 102, 1);
				cursor: pointer;
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			margin-top: 32rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			
			.row {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.icon {
				width: 48rpx;
				height: 48rpx;
				
				&__img {
					width: 100%;
					height: 100%;
				}
			}
			.name {
				color: rgba(51, 51, 51, 1);
				margin-top: 20rpx;
				font-size: 22rpx;
			}
		}
	}
	
	.my-temp-box {
		width: 100%;
		background-color: #fff;
		border-radius: 32rpx;
		box-sizing: border-box;
		padding-bottom: 32rpx;
		
		.title {
			border-bottom: 1px solid rgba(239, 239, 239, 1);
			display: flex;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			height: 104rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
		}
		.content {
			display: flex;
			align-items: center;
			box-sizing: $uni-bg-color;
			padding: 20rpx 32rpx;
			
			.left {
				width: 186rpx;
				height: 186rpx;
				
				.icon {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				margin-left: 16rpx;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				
				.name {
					color: rgba(51, 51, 51, 1);
				}
				.btn-box {
					display: flex;
					margin-top: 8rpx;
					
					.btn:last-child {
						margin-left: 16rpx;
						color: rgba(255, 92, 131, 1);
						
						button {
							height: 36rpx;
							border: none;
							background: none;
							color: rgba(255, 92, 131, 1);
							line-height: 36rpx;
							background-color: none;
							font-family: muqingfeng;
						}
						button:after {
							border: none;
						}
					}
				}
			}
		}
	}
	
	.footer {
		width: 100%;
		background-color: #fff;
		border-radius: 32rpx;
		margin-top: 32rpx;
		
		.itm {
			width: 100%;
			box-sizing: border-box;
			padding: 32px;
			height: 104rpx;
			border-bottom: 1px solid rgba(239, 239, 239, 1);
			
			display: flex;
			align-items: center;
			color: rgba(51, 51, 51, 1);
		}
	}
}
</style>